<template>
	<view class="page">
		<view class="item">
			<text>请假类型：</text>
			<view class="choice" v-for="(item,index) in optionList" :key="index" @click="selectOption(index)">
				<view :class="item.isSelect?'choice_select':'choice_notSelect'"></view>
				<text>{{item.name}}</text>
			</view>
		</view>
		<view class="item">
			<text>选择课程：</text>
			<view class="select">
				<picker mode="selector" :value="1" :range="courseList" @change="bindPickerChange" range-key="name">
					<view>{{ courseList[index].name }}</view>
				</picker>
			</view>
			<image src="../../static/more.png" mode=""></image>
		</view>
		<view class="item">
			<text>开始时间：</text>
			<view class="select">
				<picker mode="time" :value="startTime" :start="minTime" :end=maxTime @change="bindStartTimeChange">
					<view>{{ startTime }}</view>
				</picker>
			</view>
			<image src="../../static/more.png" mode=""></image>
		</view>
		<view class="item">
			<text>结束时间：</text>
			<view class="select">
				<picker mode="time" :value="endTime" :start="minTime" :end=maxTime @change="bindEndTimeChange">
					<view>{{ endTime }}</view>
				</picker>
			</view>
			<image src="../../static/more.png" mode=""></image>
		</view>
		<view class="reason">
			<view class="reason_title">

				<text>请假理由</text>
			</view>
			<view class="reason_content">
				<input type="text" value="请输入请假理由" v-model="reason" />
			</view>

		</view>
		<view class="submitButton" @click="jumpToSuccess()">
			提交
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				optionList: [{
					name: '事假',
					isSelect: false
				}, {
					name: '病假',
					isSelect: false
				}, {
					name: '其他',
					isSelect: false
				}],
				option: '',
				index: 1,
				courseList: [{
					name: '钢琴课'
				}, {
					name: '吉他课'
				}],
				minTime: '09:01',
				maxTime: "21:01",
				startTime: '12:01',
				endTime: '12:03',
				reason:''
			}
		},
		methods: {
			selectOption: function(index) {
				for (let i in this.optionList) {
					this.optionList[i].isSelect = false;
					if (i == index) {
						this.optionList[i].isSelect = true;
						this.option = this.optionList[i].name;
					}
				}
			},
			bindPickerChange: function(e) {
				// console.log(e);
				this.index = e.detail.value;
			},
			bindStartTimeChange: function(e) {
				this.startTime = e.detail.value;

			},
			bindEndTimeChange: function(e) {
				this.endTime = e.detail.value;

			},
			jumpToSuccess: function() {
				uni.navigateTo({
					url: "../submitSuccess/submitSuccess?index=3"
				})
			}
		}
	}
</script>

<style>
	.page {
		width: 750rpx;
		height: 1812rpx;
		/* height: 1020rpx; */
		/* padding-bottom: 60px; */
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #F3F5F7;
	}

	.item {
		width: 562rpx;
		height: 42rpx;
		margin-top: 42rpx;
		margin-right: auto;
		margin-left: auto;
		font-size: 30rpx;
		font-weight: 500;
		line-height: 42rpx;
		color: #222222;
		display: inline-block;
	}

	.item image {
		width: 40rpx;
		height: 40rpx;
		vertical-align: middle;
	}

	.choice {
		width: 111rpx;
		height: 30rpx;
		font-size: 26rpx;
		line-height: 30rpx;
		display: inline-block;
		color: #666666;
	}

	.choice_notSelect {
		width: 28rpx;
		height: 28rpx;
		margin-right: 14rpx;
		border-radius: 50%;
		border: 1px solid #FD973F;
		vertical-align: middle;
		display: inline-block;
	}

	.choice_select {
		width: 28rpx;
		height: 28rpx;
		margin-right: 14rpx;
		border-radius: 50%;
		border: 1px solid #FD973F;
		vertical-align: middle;
		display: inline-block;
		background-color: #FD973F;
	}

	.select {
		width: 299rpx;
		height: 42rpx;
		margin-right: 14rpx;
		background-color: #FFFFFF;
		border-radius: 16rpx;
		display: inline-block;
		vertical-align: middle;
		text-align: center;
		font-size: 26rpx;
		line-height: 42rpx;
		color: #666666;
	}

	.reason {
		width: 562rpx;
		height: 214rpx;
		margin-top: 42rpx;
		margin-right: auto;
		margin-left: auto;
		font-size: 30rpx;
		font-weight: 500;
		line-height: 42rpx;
	}

	.reason_title {
		float: left;
		width: 120rpx;
		height: 42rpx;
		font-size: 30rpx;
		line-height: 42rpx;
		color: #222222;
	}

	.reason_content {
		float: right;
		width: 413rpx;
		height: 214rpx;
		border-radius: 16rpx;
		background-color: #FFFFFF;
	}

	.submitButton {
		width: 200rpx;
		height: 96rpx;
		margin-top: 42rpx;
		margin-right: auto;
		margin-left: auto;
		border-radius: 32rpx;
		line-height: 96rpx;
		font-size: 30rpx;
		color: #FFFFFF;
		background-color: #FD973F;
		text-align: center;
	}
</style>
